<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <!-- <link rel="stylesheet" href="../css/login.css">   -->
    <title>Login Page</title>
    <style>
        /*@charset "utf-8";*/


        *{
            margin:0;
            padding:0;
            box-sizing: border-box;
        }
        body{
            background-image: url(./image/loginPage.png);
            background-repeat: no-repeat;
            background-size: cover;
            display:flex;
            flex-direction: column;
            justify-content:center;
            align-items:center;
            height:100vh;
            overflow: hidden;
        }
        .outer-box{
            width:100%;
            height:100%;
            display:flex;
            flex-direction: column;
            justify-content:center;
        }
        .box{
            display:flex;
            flex-direction: row;
            align-items:center;
            width:720px;
            height:360px;
            border-top:1px solid #ccc;
            border-left:1px solid #ccc;
            border-bottom:1px solid #ccc;
            border-right:1px solid #ccc;
            border-radius: 20px;
            backdrop-filter: blur(4px);
            position:relative;
        }
        .pre-box{
            width:360px;
            height:360px;
            position:absolute;
            transform: translateX(0%);
            box-shadow: 2px 1px 19px rgba(0, 0, 0, .1);
            transition: 0.5s ease;
        }
        .img-box{
            height:360px;
            width:360px;
            border-radius: 20px;

        }
        .img-box img{
            height:100%;

        }
        h1{
            color:white;
        }
        .box h1{
            margin-top:50px;
            color:white;
            text-align: center;
        }
        .box input{
            margin-left:70px;
            width:60%;
            height: 30px;
            border-radius: 5px;
        }
        .box label{
            color:white;
            margin-left:70px;
        }

        /* 登录按钮 */
        #btn1{
            height:30px;
            width:80px;
            border-radius: 5px;
            margin-left:90px;
            margin-right:40px;
            background-color: skyblue;
            color:white;
            border:none;
        }
        /* 注册按钮 */
        #btn2{
            height:30px;
            width:80px;
            border-radius: 5px;
            background-color: skyblue;
            color:white;
            border:none;
        }

        .login-form{
            flex:1;
            height:100%;
        }
        .register-form{
            flex:1;
            height:100%;
        }



    </style>
</head>

<body>
<div class="outerbox">
    <h1>你好，欢迎使用学习辅助系统</h1>
    <div class="box">
        <div class="pre-box">
            <div class="img-box">
                <img src="./image/loginPage.png" alt="" ></img>
            </div>
        </div>
        <div class="register-form">
            <h1>登录</h1>
            <br>
            <div class="input-box">
                <label>账号：</label>
                <br>
                <input type="text" id="name1"></input>
            </div>
            <br>
            <div class="input-box">
                <label>密码：</label>
                <br>
                <input type="text" id="pwd1"></input>
            </div>
            <br>
            <div class="btn-box">
                <button onclick="mySwitch()" style="margin-left:50px;color:pink">没有账号？点击注册</button>
                <br>
                <br>
                <button id="btn1" onclick="login()">登录</button>
<!--                <button id="btn2">退出</button>-->
            </div>
        </div>
        <div class="login-form">
            <h1>注册</h1>
            <br>
            <div class="input-box">
                <label>账号：</label>
                <br>
                <input type="text" id="name2"></input>
            </div>
            <br>
            <div class="input-box">
                <label>密码：</label>
                <br>
                <input type="password" id="pwd2"></input>
            </div>
            <br>
            <div class="btn-box">
                <button onclick="mySwitch()" style="margin-left:50px;color:pink">已有账号？点击登录</button>
                <br>
                <br>
<!--                <button id="btn1">登录</button>-->
                <button id="btn2" onclick="register()">注册</button>
            </div>
        </div>
    </div>
</div>
</div>
<script>
    //  $(document).ready(function() {
    //         // 使用class选择器来绑定事件
    //         $('.switch-link').click(function() {
    //             // 防止事件冒泡（可选，取决于您的具体需求）
    //             event.stopPropagation();

    //             // 切换.pre-box的样式
    //             var preBox = $('.pre-box');
    //             var currentTransform = preBox.css('transform');
    //             // 注意：由于CSS的transform属性可能包含多个值（如rotate和translate），所以简单地检查'translateX(0%)'可能不准确
    //             // 一个更健壮的方法是检查是否包含'translateX(0%)'
    //             var isAtZero = currentTransform.includes('translateX(0%)');
    //             var newTransform = isAtZero ? 'translateX(100%)' : 'translateX(0%)';
    //             preBox.css('transform', newTransform);

    //             // 如果需要，您还可以在这里添加其他逻辑，如切换注册和登录表单的显示/隐藏
    //             // ...
    //         });
    //     });
    //下面是负责控制滑动的部分
    let flag=true;
    const mySwitch = () => {
        console.log("成功了");
        $(".pre-box").css("transform", flag ? "translateX(100%)" : "translateX(0%)");
        flag = !flag;
    }
</script>

<script>

    function login(){
        const name =document.getElementById("name1").value
        const pwd =document.getElementById("pwd1").value
//     根据id获取值
        fetch('/login',{
            method:"POST",//请求方式
            headers:{//定制http请求的标头
                "Content-Type":"application/json;charset=UTF-8"
            },
            body:JSON.stringify({ name: name, password: pwd})
        }).then(res=> res.text()).then(res => {
            if (res){
                let json=JSON.parse(res)
                if(json.id) {
                    alert("登录成功")
                    location.href = '/'
                }
            }
            else {
                alert("账号或密码错误")
            }
        })
    }
    function register(){
        const name =document.getElementById("name2").value
        const pwd =document.getElementById("pwd2").value
        fetch('/register',{
            method:"POST",//请求方式
            headers:{//定制http请求的标头
                "Content-Type":"application/json;charset=UTF-8"
            },
            body:JSON.stringify({ name: name, password: pwd})
        }).then(response => {
                // 处理响应
                if (response.ok) {
                    return response.json(); // 如果响应状态码为 200，解析响应体为 JSON
                }
                throw new Error('Network response was not ok.'); // 如果响应状态码不为 200，抛出错误
            })
            .then(data => {
                // 处理服务器返回的数据
                alert("注册成功")
                console.log('Success:', data); // 在控制台输出成功信息
            })
            .catch(error => {
                // 处理错误
                console.error('There has been a problem with your fetch operation:', error); // 在控制台输出错误信息
            });
    }
</script>
</body>
</html>
<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>登录</title>-->
<!--</head>-->
<!--<body>-->
<!--<input type="text" placeholder="用户名" id="name">-->
<!--<br>-->
<!--<input type="password" placeholder="密码" id="pwd">-->
<!--<button id="btn" onclick="login() ">登录</button>-->

<!--<script>-->

<!--    function login(){-->
<!--        const name =document.getElementById("name").value-->
<!--        const pwd =document.getElementById("pwd").value-->
<!--//     根据id获取值-->
<!--        fetch('/login',{-->
<!--            method:"POST",//请求方式-->
<!--            headers:{//定制http请求的标头-->
<!--                "Content-Type":"application/json;charset=UTF-8"-->
<!--            },-->
<!--            body:JSON.stringify({ name: name, password: pwd})-->
<!--        }).then(res=> res.text()).then(res => {-->
<!--            if (res){-->
<!--                let json=JSON.parse(res)-->
<!--                if(json.id) {-->
<!--                    alert("登录成功")-->
<!--                    location.href = '/'-->
<!--                }-->
<!--            }-->
<!--            else {-->
<!--                alert("账号或密码错误")-->
<!--            }-->
<!--        })-->
<!--    }-->
<!--</script>-->
<!--</body>-->

<!--</html>-->